<template>
	<div class="banner">
		<header v-show='showTop' :style='showopacity'><router-link to='/' tag='span'><span class="iconfont">&#xe667;</span></router-link><span>{{title}}</span><span></span></header>
		<div class="tu">
			<img :src="imgUrl" @click='tozhe'>
			<p>{{title}}({{map}})</p>
		</div>
		<router-link to='/'>
		<span class="iconfont back">&#xe667;</span></router-link>
		<div class="zhe" v-show='showzhe' @click='showxian'>
			<swiper :options="swiperOption">
			    <swiper-slide>
		    	<img :src="imgUrl">
		   		</swiper-slide>
		   		 <swiper-slide>
		    	<img :src="imgUrl">
		   		</swiper-slide>
		   		 <swiper-slide>
		    	<img :src="imgUrl">
		   		</swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		 </swiper>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				imgUrl:'',
				title:'',
				map:'',
				showTop:false,
				showopacity:{
					opacity:0
				},
				showzhe:false,
				swiperOption: {
		    		pagination:{
		            	el: '.swiper-pagination',
		            	type: 'fraction',
		        	}
		    	}
			}
		},
		activated(){
			let data=this.$route.query;
			this.imgUrl = data.imgUrl;
			this.title=data.title;
			this.map=data.map
		},
		mounted(){
			let That=this;
			window.addEventListener('scroll',function(){
				let top=document.documentElement.scrollTop;
				let changeTop=top/100;
				changeTop=changeTop>1?1:changeTop
				if(top>0){
					That.showopacity.opacity=changeTop;
					That.showTop=true;
				}else{
					That.showTop=false
				}
			},false)
		},
		methods:{
			tozhe(){
				this.showzhe=true
			},
			showxian(){
				this.showzhe=false
			}
		}
	}
</script>
<style lang='stylus' scoped>
	.banner{
		width: 100%;
		height: 800px;
	}
	.tu{
		width: 100%;
		position: relative;
		img{
			width: 100%;
			height: 5.06rem;
		}
	}
	p{
		color: #fff;
		position: absolute;
		bottom: 10px;
		left: 10px;
		font-size: .5rem;
	}
	.back{
		position: absolute;
		top: 15px;
		left: 10px;
		color:#fff;
		font-size: .6rem;
	}
	header{
		height: 44px;
		background: #00bcd4;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 18px;
		z-index: 91;
		position: fixed;
		top: 0;
		width: 100%;
		padding-left: 10px;
	}
	.zhe{
		width: 100vw;
		background: #000;
		height: 100vh;
		z-index: 99;
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 150px;
		img{
			width: 100%;
			height:5.06rem ;
		}
	}
	.swiper-pagination{
		color: #fff;
	}
</style>